<!--  -->
<script lang="ts" setup>
import {} from 'vue'
</script>

<template>
  <div style="height: 100px">
    <span> 这里的示例没有在 CSS 动画属性上使用任何前缀。 </span>
  </div>
  <div class="multi-bg-example"></div>
  <div id="bitmap">The image is stretched to fill the area.</div>
  <h3>CSS3 边界图片</h3>
  <div id="round">这里，图像平铺（重复）来填充该区域。</div>
  <br />
  <div id="stretch">这里，图像被拉伸以填充该区域。</div>
  <p>这是我们使用的图片素材：</p>
  <img src="https://www.runoob.com/try/demo_source/border.png" />
</template>

<style lang="scss" scoped>
span {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  // animation-direction: alternate;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 100%;
  }
  // 50% {
  //   font-size: 200%;
  //   margin-left: 25%;
  //   width: 100%;
  // }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url('https://static.runoob.com/images/demo/demo2.jpg'),
    url('http://static.runoob.com/images/demo/demo3.jpg'),
    linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: bottom right, left, right;
}

#bitmap {
  border: 30px solid transparent;
  padding: 20px;
  border-image: url('https://static.runoob.com/images/demo/demo2.jpg') 30;
}

#round {
  border: 15px solid transparent;
  width: 200px;
  padding: 10px 20px;
  border-image: url(https://www.runoob.com/try/demo_source/border.png) 30 30
    round;
}
#stretch {
  border: 15px solid transparent;
  width: 250px;
  padding: 10px 20px;
  border-image: url(https://www.runoob.com/try/demo_source/border.png) 30 30
    stretch round;
}
</style>
